<template>
  <div class="snedLou">
    <div class="snedLou-header">
      <span @click="$router.go(-1)">
        <van-icon name="arrow-left" />
      </span>
      <div>发布动态</div>
      <span></span>
    </div>
    <div class="sendLou-main">
      <div class="mian-1">
        <p>动态文案</p>
        <textarea name id cols="45" rows="6" v-model="state.value"></textarea>
      </div>
      <div class="mian-2">
        <p>动态图片</p>
        <div>
          <van-uploader v-model="state.fileList" :after-read="afterRead" />
        </div>
      </div>
      <van-dialog v-model="state.show" show-cancel-button>
        <span>是否确定退出</span>
      </van-dialog>
      <!-- <img :src="state.imgs" alt=""> -->
    </div>
    <div class="sendLou-footer">
      <van-button @click="addLou">发布</van-button>
    </div>
  </div>
</template>
<script>
import axios from "../../axios/index.js";
import { Dialog } from "vant";
import { defineComponent, reactive } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const router = useRouter();
    const state = reactive({
      value: "",
      fileListL: [],
      imgs: "",
      yue: "", //月份
      times: "" //具体时间
    });
    //时间戳
    const getsendLou = () => {
      var date = new Date();
      state.yue = date.getMonth() + 1;
      const M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      const D = date.getDate();
      state.times = M + D;
      // console.log(state.yue,state.times)
    };

    //base64转图片url
    const afterRead = file => {
      const frontPic = file.content.replace(/^data:image\/\w+;base64,/, ""); // replace消除前缀，获取完整的base64码
      function base64ToBlob(code) {
        //Base64一行不能超过76字符，超过则添加回车换行符。因此需要把base64字段中的换行符，回车符给去掉，有时候因为存在需要把加号空格之类的换回来，取决于base64存取时的规则。
        code = code.replace(/[\n\r]/g, "");
        var raw = window.atob(code);
        let rawLength = raw.length;
        //转换成pdf.js能直接解析的Uint8Array类型
        let uInt8Array = new Uint8Array(rawLength);
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], { type: "application/pdf" }); //转成pdf类型
      }
      //获取到了blob对象
      let blob = base64ToBlob(frontPic);
      //获取当前url，直接放到iframe就能用，下载同理
      let blobURL = window.URL.createObjectURL(blob);
      state.imgs = blobURL;
    };
    getsendLou();
    const addLou = () => {
      //   console.log(state.value);
      Dialog.confirm({
        title: "提示",
        message: "是否确定发布"
      })
        .then(() => {
          axios
            .post("/loushiup", {
              img: JSON.parse(window.localStorage.getItem("info")).imgs, //头像
              name: JSON.parse(window.localStorage.getItem("info")).name, //姓名
              title: state.value, //文案
              imgs: state.imgs, //动态图片
              yue: `${state.yue}月`, //月份
              times: state.times //几月几号
            })
            .then(res => {
              console.log(res);
            });
          router.push("/lou");
        })
        .catch(() => {
          // on cancel
        });
    };
    return {
      state,
      addLou,
      afterRead
    };
  }
});
</script>
<style lang="scss" scoped>
.snedLou-header {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 50px;
  font-size: 18px;
  background: #1887f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  span {
    width: 20%;
    margin-left: 10px;
  }
  img {
    margin-right: 10px;
  }
}
.sendLou-main {
  width: 100%;
  height: 40%;
  flex: 1;
  overflow-y: scroll;
}
.sendLou-footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  button {
    width: 100%;
    background: #169bd5;
    color: white;
    font-size: 16px;
  }
}
</style>

